import { useState } from 'react';

import { sendData } from 'socketApi';
import { Sensor } from 'store';

type Props = {
  sensor: Sensor;
};

const LedControl = ({ sensor }: Props) => {
  const [value, setValue] = useState(0);

  const onChange = (event: React.ChangeEvent<HTMLInputElement>) => {
    if (sensor.channel2.sequenceNumber !== null) {
      const value = parseInt(event.target.value);
      const mSeq = sensor.channel2.sequenceNumber >> 8;
      const lSeq = sensor.channel2.sequenceNumber - (mSeq << 8);
      const mValue = value >> 8;
      const lValue = value - (mValue << 8);
      setValue(value);
      sendData([2, 0x10, mSeq, lSeq, mValue, lValue]);
    }
  };

  return (
    <div>
      {value}
      <br />
      <input
        type="range"
        min={0}
        max="5000"
        value={`${value}`}
        className="range"
        step="100"
        onChange={onChange}
        disabled={sensor.channel2.sequenceNumber === null}
      />
    </div>
  );
};

export default LedControl;

